<template>
	<AbnormalTemplate @treeHandle="treeHandle" :treeType="treeType">
		<div slot="rightBtn">&nbsp;<el-button @click="exportPdf">导出</el-button></div>
		<div class="trend_wrap">
			<theme-fish :chartData="chartData" :lineData="lineData" @clickFish="clickFish"></theme-fish>
		</div>
	</AbnormalTemplate>
</template>
<script>
import AbnormalTemplate from "@/template/abnormal.temp.vue";
import ThemeFish from "@/components/luyiming/ThemeFish/index.vue";
import { getStatus, queryTrendData } from "@/api/RCIM/RCIM-historyTrend.js"
import moment from "moment";
export default {
	name: "KdHistoryData",
	components: {
		AbnormalTemplate,
		ThemeFish,
	},
	data() {
		return {
			treeType: ["raddevice"],
            colorList: {
				"入库": '#1890ff',
				"作业": '#a84bf9',
				"运输": '#f43333',
    			"出库": '#ffb870',
    			"在库": '#67c23a',
			},
			dateUit: 'minute',
			list: [
				{
					from: '2019-01-01',
					to: '2019-01-02',
					status: '出库',
				},
				{
					from: '2019-01-02',
					to: '2019-01-03',
					status: '运输',
				},
				{
					from: '2019-01-03',
					to: '2019-01-06',
					status: '作业',
				},
				{
					from: '2019-01-06',
					to: '2019-01-07',
					status: '运输',
				},
				{
					from: '2019-01-07',
					to: null,
					status: '入库',
				},
			],
			lineData: {
				xData: [],
				vData: [],
			},
			chartData: {
				data: [],
				xdata: [],
				efData: [],
				vmap: [],
				scaData:[],
			},
			listLoading: true,
			listQuery: {
				id: null,
				startTime: null,
				endTime: null,
			},
			type: "1",
		};
	},
	mounted() {

	},
	created() {
	},
	methods: {
		/**
		 * @desc 导出Pdf
		 */
		exportPdf() {
			this.$confirm('确认要导出吗？')
				.then(_ => {
					this.htmlTitle = '历史趋势';
					this.getPdf('.trend_wrap').then(
						res => {}
					)
				})
				.catch(_ => {

				});
		},
		/**
		 * @desc 获取线类型
		 */
		getLineType(){
			let typeStr = '';
			let formatRule = '';
			switch (this.type) {
				case '2':
					typeStr = 'hour';
					formatRule = 'YYYY-MM-DD HH'
					break;
				case '3':
					typeStr = 'day';
					formatRule = 'YYYY-MM-DD'
					break;
				default:
					typeStr = 'minute';
					formatRule = 'YYYY-MM-DD HH:mm'
			}
			return {
				typeStr,
				formatRule,
			};
		},
		/**
		 * @desc 点击左侧树回调
		 * @param {Object} param 树节点参数
		 */
		treeHandle(param) {
			this.listQuery.id = param.id;
			this.listQuery.startTime = moment(param.startTime).format('YYYY-MM-DD');
			this.listQuery.endTime = moment(param.endTime).format('YYYY-MM-DD');
			this.listQuery.treeType = param.treeType;
			this.getFishData().then(res=> {
				this.getLineData({
					startTime:  this.list[0].from,
					endTime: this.list[0].to,
					type: this.type,
				})
			}).catch(err => {
				this.data = []
				this.list = []
				this.chartData = this.parseData()
			})
		},
		/**
		 * @desc 获取折线图参数
		 * @param {Object} query 参数
		 */
		getLineData(query){
			const params = Object.assign({}, this.listQuery, query)
			const {typeStr, formatRule} = this.getLineType()
			queryTrendData(params).then(res => {
				const result = {
					vData: [],
					xData: [],
				}
				if( res.data instanceof Array ){
					res.data.map(item => {
						result.xData.push( moment(item.time).format(formatRule) )
						result.vData.push(item.value)
					});
				}
				if(result.xData.length === 0){
					let itemBtw = moment(params.endTime).diff(params.startTime, typeStr) + 1
					let xData = new Array(itemBtw).fill(1)
					let startTime = params.startTime;
					xData = xData.map(
						(item, indet) => {
							const itObj = moment(startTime).add(indet, typeStr).format(formatRule)
							return itObj
						}
					)
					result.xData = xData;
				}
				this.lineData = result;
			})
		},
		/**
		 * @desc 获取鱼骨图数据
		 */
		getFishData(){
			return getStatus(this.listQuery).then(res => {
				if( res.data?.timeLine && (res.data?.timeLine instanceof Array) ){
					this.list = res.data?.timeLine.map(item => {
						item.from = item.form;
						return item
					})
				}else{
					this.list = []
				}
				this.chartData = this.parseData()
			})
		},
		/**
		 * @desc 格式化数据
		 */
		parseData(a){
			const {typeStr, formatRule} = this.getLineType()
			let len = 0;
			const optionsData = {
				data: [],
				xdata: [],
				efData: [],
				vmap: [],
				scaData:[],
			}
			const _self = this;
			optionsData.vmap = this.list.map( (item, index) => {

				let itemBtw = 1
				if(item.to){
					itemBtw = 20 //moment(item.to).diff(item.from, _self.dateUit)
				}
				console.log(itemBtw)
				let whileIndex = 1;
				optionsData.data.push(_self.getItemLineData('symbol'))
				optionsData.xdata.push(item.from)
				optionsData.scaData.push(_self.getScatterData('symbol', item.from))
				optionsData.efData.push(_self.getItemSymleData('symbol', item.status, index === 0 ? 'render': 'emphasis', index))
				for( ; whileIndex < itemBtw; whileIndex ++ ){
					optionsData.data.push(_self.getItemLineData())
					optionsData.xdata.push(moment(item.from).add(whileIndex, _self.dateUit).format(formatRule))
					optionsData.scaData.push(_self.getScatterData())
					optionsData.efData.push(_self.getItemSymleData())
				}
				const result = {
					gte: len,
					lt: len + itemBtw,
					color: _self.colorList[item.status],
				}
				len += itemBtw
				return result
			})
			console.log(optionsData)
			return optionsData
		},
		getLineXdata(){

		},
		/**
		 * @desc 获取线类型
		 */
		getItemLineData(type){
			const itemLineSymbelData = {
				value: 1,
				symbol: 'none' ,
			}
			const itemData = {
				value: 1,
				symbol: 'none',
			}
			if(type === 'symbol') {
				console.log('====',itemLineSymbelData)
				return itemLineSymbelData
			}else{
				return itemData
			}
		},
		getScatterData(type, times){
			const itemSymbelData = {
				value: 1,
				times,
				symbolSize: 1,
			}
			const itemData = {
				value: 1,
				symbol: 'none',
			}
			if(type === 'symbol') {
				return itemSymbelData
			}else{
				return itemData
			}
		},
		getItemSymleData(type, status, rip, index){
			const itemSymbelData = {
				value: 1,
				status,
				index,
				symbolSize: 12,
				showEffectOn: rip,
				itemStyle: {
					color: this.colorList[status],
					shadowBlur: 10,
					shadowColor: '#333',
					borderWidth: '10',
					boderColor: '#000'
				},
			}
			const itemData = {
				value: 1,
				symbol: 'none',
			}
			if(type === 'symbol') {
				return itemSymbelData
			}else{
				return itemData
			}
		},
		clickFish(params){
			console.log('params',params)
			const index = params.index;
			this.getLineData({
				startTime:  this.list[index].from,
				endTime: this.list[index].to,
				type: this.type,
			})
		},
	}
};
</script>

<style lang="scss" scoped>
	.trend_wrap{
		width: 100%;
		height: calc(100% - 100px);
	}
</style>
